<template>
    <div class="change_password">
        <Header v-if="showHeader" title="修改密码"></Header>
        <!-- <van-nav-bar title="修改密码" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar> -->
        <section class="change_password_list">
            <van-cell-group>
                <van-field v-model="oldPassword" type="password" label="初始密码" placeholder="请输入密码" />
                <van-field v-model="newPassword" type="password" label="新密码" placeholder="请输入新密码" />
                <van-field v-model="confirmNewPassword" type="password" label="确认密码" placeholder="请输入确认密码" />
            </van-cell-group>
            <van-button type="primary" round size="large" @click="changePassword">确定</van-button>
        </section>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import Loading from "@/components/Loading.vue";
import { changePassword } from "@/request/api.js";
import Header from "@/components/Header.vue";
export default {
    name:'ChangePassword',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:false,
            oldPassword:'',
            newPassword:'',
            confirmNewPassword:'',
            flag:false
        }
    },
    components:{Loading,Header},
    methods:{
        checkPassword(){
            if(this.oldPassword == ''){
					this.$toast({message:'初始密码不能为空',duration:1000});
				}else if(this.oldPassword.length < 6 || this.oldPassword.length > 20){
					this.$toast({message:'初始密码格式有误',duration:1000});
				}else if(this.newPassword == ''){
					this.$toast({message:'新密码不能为空',duration:1000});
				}else if(this.newPassword.length < 6 || this.newPassword.length > 20){
					this.$toast({message:'新密码格式有误',duration:1000});
				}else if(this.newPassword == this.oldPassword){
					this.$toast({message:'新密码不能与初始密码相同',duration:1000});
				}else if(this.confirmNewPassword == ''){
					this.$toast({message:'确认新密码不能为空',duration:1000});
				}else if(this.confirmNewPassword.length < 6 || this.confirmNewPassword.length > 20){
					this.$toast({message:'确认新密码格式有误',duration:1000});
				}else if(this.confirmNewPassword != this.newPassword){
					this.$toast({message:'确认新密码与新密码必须一致',duration:1000});
				}else{
					this.flag = true;
				}
        },
        changePassword(){
            this.checkPassword();
            if(this.flag){
                this.showLoading = true;
                changePassword({
                    access_token:this.$store.state.token,
                    old_pass:this.oldPassword,
                    new_pass:this.newPassword,
                    confirm_pass:this.confirmNewPassword
                }).then(res=>{
                    console.log(res.data);
                    this.showLoading = false;
                    if (res.code == 1) {
                        this.$toast({
                            message:res.msg,
                            duration:1500
                        })
                    } else {
                        this.$toast({
                            message:res.msg,
                            duration:1500
                        })
                        this.$router.push({path:'/login'});
                    }
                }).catch(err=>{
                    console.log(err)
                    this.showLoading = false;
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.change_password_list{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    .van-cell{
        font-size: 14px;
        color: #151617;
        font-family: 'PingFang-SC-Bold';
        border-bottom: 1px solid #f7f7f7;
    }
    .van-button--large{
        margin-top: 32px;
        font-size: 20px;
        color: #fff;
        background: #02ccbd;
        box-shadow: 0 4px 20px rgba(2, 204, 189, .3);
    }
}

/deep/ .van-toast--text{font-size: 15px !important;}
</style>